<template>
  <div class="cvue-table-eform">
    <div class="table-wrap">
      <el-table
        :stripe="option.stripe"
        :width="option.width"
        :border="option.border"
        :highlight-current-row="false"
        :addType="addType"
        ref="homeTable"
        :class="cssClass"
        class="home-table"
        v-loading="loading"
        @cell-click="handleClick"
        @selection-change="handleSelectionChange"
        @current-change="handleCurrentChangeTable"
        :data="data">
        <!-- 复选框 -->
        <el-table-column
          type="selection"
          width="55"
          v-if="option.selected"
          align="center"
          header-align="center">
        </el-table-column>
        <!-- 序号 -->
        <el-table-column
          type="index"
          :width="indexWidth"
          v-if="option.index"
          align="center"
          label="序号">
        </el-table-column>
        <!-- 循环列 -->
        <el-table-column
          :prop="cloumn.prop"
          :label="cloumn.label"
          :width="cloumn.width"
          :align="cloumn.align"
          :headerAlign="cloumn.headerAlign"
          :show-overflow-tooltip="cloumn.isShowOverflowTooltip"
          :key="cloumn.prop"
          :sortable="cloumn.sortable"
          v-for="cloumn in option.cloumn">
          <template slot-scope="scope">
            <slot v-if="cloumn.slotStatus" :name="cloumn.prop" :row="scope.row"></slot>
            <template v-else>
              <span v-if="cloumn.prop=='index'">{{(scope.$index + 1) + pageSize * (tablePage - 1) }}</span>
              <span v-else>{{scope.row[cloumn.prop]}}</span>
            </template>
          </template>
        </el-table-column>
        <slot name="multipleCloumn"></slot>
        <slot name="singleCloumn"></slot>
        <!-- 操作按钮 -->
        <slot name="actionMenu"></slot>
      </el-table>
    </div>
    <div class="page" v-show="isShowPage">
      <el-pagination
        :current-page="page.currentPage"
        background
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        :layout="layout"
        :total="page.total"
        :pager-count="5"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <div class="table-addHandle" @click="addTableData" v-show="isShowAdd">
      <i class="el-icon-plus"></i>
    </div>
  </div>
</template>
<script>
import { getClientHeight } from '@/utils/validatorTool'
export default {
  name: 'cvue-table-eform',
  data () {
    return {
    }
  },
  props: {
    isShowPage: {
      type: Boolean,
      default: false
    },
    page: {
      type: Object,
      default: () => {
        return {}
      }
    },
    option: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    },
    data: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    totalData: {
      type: Array,
      default: () => {
        return []
      }
    },
    cssClass: {
      type: String,
      default: ''
    },
    isIndexTotal: {
      type: Boolean,
      default: false
    },
    addType: {
      type: String,
      default: 'bottom'
    },
    isShowSummary: {
      type: Boolean,
      default: false
    },
    isShowTotalSummary: {
      type: Boolean,
      default: false
    },
    summaryType: {
      type: Number,
      default: 1
    },
    indexWidth: {
      type: Number,
      default: 62
    },
    summaryFun: {
      type: Function,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    },
    layout: {
      type: String,
      default: 'total,sizes,prev,pager,next,jumper'
    },
    tablePage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 1
    },
    isShowAdd: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleCurrentChange (val) {
      this.$emit('current-change', val)
    },
    handleCurrentChangeTable (val) {
      this.$emit('current-change-table', val)
    },
    handleSizeChange (val) {
      this.$emit('size-change', val)
    },
    handleClick (row, index, prop) {
      this.$emit('cellClick', row, index, prop)
    },
    handleSelectionChange (val) {
      this.$emit('select-change', val)
    },
    addTableData () {
      if (this.addType == 'bottom') {
        this.data.push({})
      }
      if (this.addType == 'center') {
        if (this.data.length < 2) {
          this.$message({message: '请先选择起点站和终点站', duration: 2000, type: 'error'})
          return
        }
        this.data.splice(this.data.length-1, 0, {stationArr: [], ticket_fee: this.data[this.data.length-2].ticket_fee})
      }
      if (this.addType == 'center1') {
        // if (this.data.length < 2) {
        //   this.$message({message: '请先生成返程站点', duration: 2000, type: 'error'})
        //   return
        // }
        // this.data.splice(this.data.length-1, 0, {stationArr: []})
        if (this.data.length == 0) {
          this.data.push({stationArr: [], ticket_fee: ''})
        } else {
          this.data.push({stationArr: [], ticket_fee: this.data[this.data.length-1].ticket_fee})
        }
      }
      if (this.addType == 'center2') {
        if (this.data.length < 1) {
          this.$message({message: '请先生成返程站点', duration: 2000, type: 'error'})
          return
        }
        this.data.splice(this.data.length-1, 0, {stationArr: []})
      }
    }
  }
}
</script>
<style lang="scss">
.cvue-table-eform {
  position: relative;
  .page {
    text-align: center;
    padding-top: 15px;
    .el-input__inner {
      border-radius: 4px;
      border: 1px solid #dcdfe6;
    }
    .el-pagination{
      margin:0;
    }
  }
  .el-table thead tr th {
    background-color: #f6f6fd;
    color: #333;
  }
  .table-addHandle {
    position: absolute;
    left: 50%;
    background: #409eff;
    color: #fff;
    width: 60px;
    height: 20px;
    border-radius: 0 0 20px 20px;
    text-align: center;
    line-height: 20px;
    margin-left: -30px;
    cursor: pointer;
  }
}
</style>
